<script setup>
import { ref, reactive } from 'vue'
import { getBannersApi, setGoodsBannerApi } from '@/api/goods'
import ChooseImage from '@/components/choose-image.vue'
import { toast } from '@/utils/elnotification'

//表单数据
const form = reactive({
  banners: []
})

//轮播图id
const goodsId = ref(0)

//抽屉显示条件
const dialogVisible = ref(false)

//抽屉显示方法
const show = async (row) => {
  goodsId.value = row.id

  const res = await getBannersApi(goodsId.value)

  form.banners = res.goodsBanner.map((item) => item.url)

  dialogVisible.value = true
}

//按钮加载效果
const loading = ref(false)

const emit = defineEmits(['reLoadData'])

//提交事件
const submit = async () => {
  loading.value = true

  try {
    await setGoodsBannerApi(goodsId.value, form)
    toast('设置轮播图成功')
    dialogVisible.value = false
    emit('reLoadData')
  } catch (error) {
  } finally {
    loading.value = false
  }
}

//暴露方法
defineExpose({
  show
})
</script>

<template>
  <el-drawer title="设置轮播图" v-model="dialogVisible" size="50%" destroy-on-close>
    <el-form :model="form" label-width="80px">
      <el-form-item label="轮播图">
        <ChooseImage :limit="9" v-model:url="form.banners" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit" :loading="loading">提交</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>
